<template>
  <div class="DiaLogue">
    <div class="chatpdf">
      <div class="pannel">
        <div class="fileList">
          <div class="fileTitle" @click="DiaLogue_show0('item1')">ChartAi对话</div>
          <div class="fileTitle" @click="DiaLogue_show0('item2')">查询天气信息以及未来天气</div>
          <div class="fileTitle" @click="DiaLogue_show0('item3')">历史上的今天都发生了哪些大事</div>
          <div class="fileTitle" @click="DiaLogue_show0('item4')">食物营养查询，吃适合的食物</div>
        </div>
      </div>
      <div class="chatpdfBox" v-if="select_show=='item1'">
        <div class="chatpdfLine">
          <div class="chatpdfRow">
            <div class="chatpdfContent">我是知识库机器人，一个专门响应人类指令的大模型</div>
          </div>
          <div class="chatpdfRow">
            <div class="chatpdfContent">我服务于人类，致力于让生活更美好</div>
          </div>
          <div v-for="item in input_box_list" :key="item">
            <div class="chatpdfRow" v-if="item.user=='ai'">
              <div class="chatpdfContent">{{ item.info }}</div>
            </div>
            <div class="chatpdfRow chatpdfAsk" v-if="item.user=='couster'">
              <div class="chatpdfContent">{{ item.info }}</div>
            </div>
          </div>
        </div>
        <div class="chatpdfArea">
          <textarea v-model="user_input"></textarea>
          <button @click="DiaLogue_show">
            <svg
              t="1682141916531"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1271"
              width="16"
              height="16"
            >
              <path
                d="M0 1024l106.496-474.112 588.8-36.864-588.8-39.936L0 0l1024 512z"
                fill="#ffffff"
                p-id="1272"
              />
            </svg>
          </button>
        </div>
      </div>
      <div class="chatpdfBox" v-else-if="select_show=='item2' &&weather_data">
        <div class="weather_box">
          <div class="head_box">
            <div class="head_box_item">国家：{{ weather_data.city.counname }}</div>
            <div class="head_box_item">时区：{{ weather_data.city.timezone }}</div>
            <div class="head_box_item">省份：{{ weather_data.city.pname }}</div>
            <div class="head_box_item">市区：{{ weather_data.city.name }}</div>
          </div>
          <div class="content_box_header">
            <div class="content_box_header_item">更新时间{{ weather_data.condition.updatetime }}</div>
            <div class="content_box_header_item"></div>
          </div>
          <div class="content_box">
            <div class="content_box_item">
              <span class="content_box_item_title">天气状况</span>
              <span class="content_box_item_info">{{ weather_data.condition.condition }}</span>
            </div>
            <div class="content_box_item">
              <span class="content_box_item_title">湿度</span>
              <span class="content_box_item_info">{{ weather_data.condition.humidity }}</span>
            </div>
            <div class="content_box_item">
              <span class="content_box_item_title">体感温度</span>
              <span class="content_box_item_info">{{ weather_data.condition.realFeel }}</span>
            </div>
            <div class="content_box_item">
              <span class="content_box_item_title">温度</span>
              <span class="content_box_item_info">{{ weather_data.condition.temp }}</span>
            </div>
            <div class="content_box_item">
              <span class="content_box_item_title">风向</span>
              <span class="content_box_item_info">{{ weather_data.condition.windDir }}</span>
            </div>
            <div class="content_box_item">
              <span class="content_box_item_title">风力等级</span>
              <span class="content_box_item_info">{{ weather_data.condition.windLevel }}</span>
            </div>
            <div class="content_box_item">
              <span class="content_box_item_title">风速</span>
              <span class="content_box_item_info">{{ weather_data.condition.windSpeed }}</span>
            </div>
            <div class="content_box_item">
              <span class="content_box_item_title">顺风度数</span>
              <span class="content_box_item_info">{{ weather_data.condition.windDegrees }}</span>
            </div>
          </div>
          <div class="content_box_foot">注意： {{ weather_data.condition.tips }}</div>
            <div class="foot_box_header_item_title">未来七天：</div>
          <div class="foot_box">
            <div class="foot_box_item" v-for="(item,index) in weather_data.forecast" :key="item">
              <div class="foot_box_item_index">第{{ index+1 }}天</div>
              <hr />
              <div class="foot_box_item_info">
                <span class="foot_box_item_title">天气状况</span>
                <!-- <br /> -->
                <span>{{ item.conditionDay }}</span>
              </div>
              <hr />
              <div class="foot_box_item_info">
                <span class="foot_box_item_title">白天温度</span>
                <!-- <br /> -->
                <span>{{ item.tempDay }}</span>
              </div>
              <hr />

              <div class="foot_box_item_info">
                <span class="foot_box_item_title">夜间温度</span>
                <!-- <br /> -->
                <span>{{ item.tempNight }}</span>
              </div>
              <hr />
              <div class="foot_box_item_info">
                <span class="foot_box_item_title">天气湿度</span>
                <!-- <br /> -->
                <span>{{ item.humidity }}</span>
              </div>
              <hr />
              <div class="foot_box_item_info">
                <span class="foot_box_item_title">风力</span>
                <!-- <br /> -->
                <span>{{ item.windDirDay }}</span>
              </div>
              <hr />
              <div class="foot_box_item_info">
                <span class="foot_box_item_title">风速</span>
                <!-- <br /> -->
                <span>{{ item.windSpeedDay }}</span>
              </div>
              <hr />
            </div>
          </div>
        </div>
      </div>
      <div class="chatpdfBox" v-else-if="select_show=='item3' &&history_data">
        <div class="history_box" v-for="item in history_data" :key="item">
          <div class="history_boxitem1">
            <img src="@/assets/img/history.png" alt srcset />
          </div>
          <div class="history_boxitem2">
            <div class="history_box_item">
              <div class="history_box_item_title">{{ item.title }}</div>
              <div class="history_box_item_year">时间：{{ item.year }}</div>
            </div>&nbsp;&nbsp;
            <span v-html="item.desc"></span>
            ...
            <a :href="item.link">
              <div class="go_info">
                <span>跳转查看详情</span>
              </div>
            </a>
            <!-- <div>{{ item.title }}</div> -->
          </div>
          <!-- <img :src="item.image" alt=""> -->
        </div>
      </div>
      <div class="chatpdfBox" v-else-if="select_show=='item4' &&food_data">
        <div class="food_box">
          <div class="food_box_search">
            <div class="search">
              <input placeholder="搜索..." v-model="food_search_info" type="text" />
              <button type="submit" @click="food_show">搜索</button>
            </div>
          </div>
          <div class="food_box_item" v-for="item in food_data" :key="item">
            <img :src="item.img" alt />
            <div class="food_box_info">
              <!-- {{item}} -->
              <div>食品名称： {{item.name ? item.name :'无'}}</div>
              <div>食品详情： {{item.desc}}</div>
              <div>{{item.heat}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
let select_show = ref("item1");
let user_input = ref("");
let weather_data = ref("");
let history_data = ref("");
let food_data = ref("");
let food_search_info = ref("香蕉");
let search_ai_info = ref("");
let input_box_list = ref([]);
onMounted(() => {
  history_show();
  weather_show();
  food_show();
});
const food_show = async () => {
  // let food = "香蕉";
  if (food_search_info.value) {
    axios
      .get(
        `https://api.oioweb.cn/api/search/FoodHeat?keyword=${food_search_info.value}&page=1`
      )
      .then(res => {
        // undefined;
        // console.log("食物营养查询，吃适合的食物", res);
        let {
          data: { result }
        } = res;
        food_data.value = result;
        // console.log("食物营养查询，吃适合的食物", result);
      });
  } else {
    ElMessage({
      message: "输入框不能为空",
      type: "warning"
    });
  }
  // console.log("天气查询", result.condition);
};
const weather_show = async () => {
  await axios.get("https://api.oioweb.cn/api/weather/GetWeather").then(res => {
    let {
      data: { result }
    } = res;
    weather_data.value = result;
    console.log("天气查询", result.forecast);
    // console.log("天气查询", result.condition);
  });
};
const history_show = async () => {
  await axios.get("https://api.oioweb.cn/api/common/history").then(res => {
    // console.log(res);
    let {
      data: { result }
    } = res;
    history_data.value = result;
    // console.log("历史上的今天都发生了哪些大事", result);
  });
};
const DiaLogue_show0 = async (item: any) => {
  console.log(item);
  switch (item) {
    case "item1":
      // console.log('1')
      select_show.value = item;
      break;
    case "item2":
      // console.log('2')
      select_show.value = item;
      break;
    case "item3":
      // console.log("3");
      select_show.value = item;
      break;
    default:
      select_show.value = item;
      console.log("default");
  }
};

const DiaLogue_show = async () => {
  if (user_input.value) {
    let userobj = {};
    userobj.user = "couster";
    userobj.info = user_input.value;
    input_box_list.value.push(userobj);
    await axios
      .get(`https://api.oioweb.cn/api/ai/chat?text=${user_input.value}`)
      .then(res => {
        //   undefined;
        // console.log(res);

        user_input.value = "";
        let {
          data: {
            code,
            result: { displayText }
          }
        } = res;
        let ai_input = {};
        ai_input.user = "ai";
        ai_input.info = displayText;
        input_box_list.value.push(ai_input);
      });
  } else {
    ElMessage({
      message: "输入框不能为空",
      type: "warning"
    });
  }
};

// watch([() => food_search_info.value], () => {
//   if (food_search_info.value=='') {
//     setTimeout(() => {
//       food_search_info.value='香蕉'
//       console.log(food_search_info.value);

//     }, 2000);
//   }
// });
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.DiaLogue {
  .chatpdf {
    display: flex;
    height: calc(100vh - 57px);
    flex-direction: row;
  }
  .chatpdf .pannel {
    width: 255px;
    background-color: rgb(0, 21, 41);
  }
  .chatpdfBox {
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    flex: 1;
    background: linear-gradient(to bottom right, #dbe6fb, #f3f4f8);
    background-size: cover;
    background-attachment: fixed;
    .chatpdfLine {
      flex: 1;
      width: 100%;
      // max-width: 1000px;
      margin: 0 auto;
      background-color: #383e47;
      overflow-y: auto;
      .chatpdfRow {
        margin: 20px 10px;
        display: flex;
      }
      .chatpdfAsk {
        justify-content: flex-end;
      }
      .chatpdfContent {
        display: inline-block;
        border-radius: 8px;
        padding: 6px 12px;
        max-width: 500px;
        background: rgba(255, 255, 255, 0.6);
        font-size: 14px;
        box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.12),
          0px 1.6px 3.6px rgba(0, 0, 0, 0.16);
      }
      .chatpdfAsk .chatpdfContent {
        background: linear-gradient(90deg, #2870ea 10.79%, #1b4aef 87.08%);
        color: #fff;
      }
    }
    .chatpdfArea {
      display: flex;
      // padding: 5px 10px;
      max-width: 1000px;
      margin: 0 auto;
      width: 100%;
    }
    .chatpdfArea textarea {
      flex: 1;
      border-color: #d9d9d9;
      resize: none;
      outline: none;
      padding: 0px 5px;
      height: 35px;
      font-size: 20px;
      font-weight: 900;
      line-height: 30px;
      color: #404040;
      border-radius: 10px 0px 0px 10px;
      transition: all 0.3s, height 0s;
    }
    .chatpdfArea textarea:hover {
      border-color: #4096ff;
    }
    .chatpdfArea button {
      height: 35px;
      color: #fff;
      background: linear-gradient(90deg, #2870ea 10.79%, #1b4aef 87.08%);
      box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1);
      border: none;
      padding: 0 20px;
      border-radius: 0px 8px 8px 0px;
      cursor: pointer;
    }
    .chatpdfArea button:hover {
      background-color: hsl(214, 40%, 88%);
    }
    .weather_box {
      width: 100%;
      height: 100%;
      padding-top: 20px;
      display: flex;
      flex-direction: column;
      // justify-content: center;
      // background-color: #1b4aef;
      .head_box {
        font-family: "楷体";
        font-weight: 900;
        font-size: 25px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
      }
      .content_box_header {
        padding-top: 20px;
        height: 50px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        // background-color: saddlebrown;
        width: 80%;
        .content_box_header_item {
          width: 30%;
          height: 100%;
          font-size: 20px;
          // background-color: saddlebrown;
        }
      }
      .content_box {
        // padding-top: 40px;
        padding-left: 40px;
        // padding: 10px;
        width: 80%;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        // justify-content: space-between;
        flex-wrap: wrap;
        gap: 50px;
        // background-color: #2870ea;

        .content_box_item {
          text-align: center;
          display: flex;
          flex-direction: column;
          justify-content: center;
          width: 20%;
          height: auto;
          .content_box_item_title {
            font-size: 20px;
            font-family: "楷体";
            font-weight: 900;
          }
          border: 5px double rgb(1, 139, 219);
          // background-color: #2870ea;
        }
      }
      .content_box_foot {
        padding-top: 20px;
        height: 50px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        // background-color: saddlebrown;
        width: 80%;
        font-size: 20px;
        font-weight: 900;
        color: red;
      }
      .foot_box_header_item_title {
        padding-top: 20px;
        height: 50px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        // background-color: saddlebrown;
        width: 80%;
        font-size: 20px;
        font-weight: 900;
        color: rgb(0, 68, 255);
      }
      .foot_box {
        width: 80%;
        background-color: #e8effa;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .foot_box_item {
          padding-top: 10px;
          display: flex;
          flex-direction: column;
          // justify-content: center;
          text-align: center;
          width: 100px;
          height: auto;
          // background-color: #1b4aef;
          border: #1b4aef 1px solid;
          .foot_box_item_info {
            // line-height: 30px;
            display: flex;
            flex-direction: column;
            .foot_box_item_title {
              // padding-bottom: 0px;
              font-size: 20px;
              font-weight: 900;
            }
          }
        }
      }
    }
    .history_box {
      width: 90%;
      margin: 0 auto;
      // background-color: #2870ea;
      padding: 10px;
      height: 100%;
      display: flex;
      flex-direction: row;
      // justify-content: space-around;
      .history_boxitem1 {
        flex: 1;
        img {
          width: 100px;
          height: 100px;
        }
      }
      .history_boxitem2 {
        flex: 8;
        width: 100%;
        .history_box_item {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          width: 100%;
          // background-color: #1b4aef;
          .history_box_item_title {
            font-size: 20px;
            font-weight: 900;
            // background-color: #4096ff;
          }
          .history_box_item_year {
            font-size: 15px;
            // background-color: #3b4450;
          }
        }
        a {
          text-decoration: none;
        }
        .go_info {
          margin-top: 10px;
          width: 150px;
          height: 30px;
          background-color: #000000;
          text-decoration: none;
          list-style: none;
          text-align: center;
          padding-top: 10px;
          margin-left: 80%;
          color: #d7d8db;
          span {
            // margin: 0 auto;
          }
        }
        // background-color: #2870ea;
      }
    }
    .food_box {
      width: 60%;
      margin: 0 auto;
      // background-color: #1b4aef;
      .food_box_item {
        margin-top: 10px;
        background-color: #c7c7c7;
        img {
          width: 100px;
          flex: 1;
        }
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .food_box_info {
          font-size: 20px;
          font-weight: 900;
          flex: 9;
          // background-color: #1b4aef;
        }
      }
      .food_box_search {
        padding-top: 10px;
        justify-content: center;
        text-align: center;
        .search {
          margin: 0 auto;
          display: inline-block;
          position: relative;
        }

        .search input[type="text"] {
          width: 400px;
          height: 30px;
          padding: 10px;
          border: none;
          border-radius: 20px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .search button[type="submit"] {
          background-color: #4e99e9;
          border: none;
          color: #fff;
          cursor: pointer;
          padding: 15px 30px;

          border-radius: 20px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
          position: absolute;
          top: 0;
          right: 0;
          transition: 0.9s ease;
        }

        .search button[type="submit"]:hover {
          transform: scale(1.1);
          color: rgb(255, 255, 255);
          background-color: blue;
        }
      }
    }
  }

  .chatpdf .fileTitle {
    background-color: #1677ff;
    color: #fff;
    border-radius: 8px;
    padding: 10px;
    margin: 10px;
    font-size: 14px;
    cursor: pointer;
  }
  @media (max-width: 768px) {
    .pannel {
      display: none;
    }
  }
}
</style>